<template>
    <div class="bigbox">
        <div class="title mess">注册琪琪交友</div>
        <div class="username item mess">
            <div class="_username">账号</div>
            <div class="_username_content">
                <input type="text" class="_username_input input" name="username" placeholder="仅支持数字最大长度为11"
                       v-model="username">
            </div>
        </div>
        <div class="password item mess">
            <div class="_password">密码</div>
            <div class="_password_content content">
                <input type="password" class="_password_input input" name="password" placeholder="密码最大长度为20"
                       v-model="password">
            </div>
        </div>

        <div class="name item mess">
            <div class="_name">昵称</div>
            <div class="_name_content content">
                <input type="text" class="_name_input input" name="name" v-model="name">
            </div>
        </div>

        <div class="style_message item mess">
            <div class="_style_message">个性签名</div>
            <div class="_style_message_content content">
                <input type="text" class="_style_message_input input" name="style_message" v-model="styleMessage">
            </div>
        </div>

        <div class="register_and_forgetpass mess">
<!--            <router-link tag="div" active-class="" to="/login" class="">已经有账号,点击这里登录</router-link>-->
            <div @click.stop="to_login">已经有账号,点击这里登录</div>
        </div>

        <div class="login" @click.stop="myRegister">
            注册
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Toast} from 'vant';
    import {register,select_user} from "../request/api";

    Vue.use(Toast);
    export default {
        name: "register",
        data() {
            return {
                username: "",
                password: "",
                name: "",
                styleMessage: "",
                is_rename:false,
                userList:[],
            }
        },
        methods: {
            myRegister() {
                let pre_name = this.username;
                let num_username = parseInt(this.username);
                //判断用户名密码是否合法
                if (((pre_name.length !== num_username.toString().length) || (num_username.toString().length>11)) || ((this.password.length <= 0) || (this.password.length > 20))) {
                    Toast.fail("请输入合法的用户名密码");
                    return;
                }
                //判断用户名是否为空
                if (this.name === "") {
                    Toast.fail("请输入昵称");
                    return;
                }

                //遍历用户 查看是否有重复用户名
                    select_user(null).then(res => {
                        for(let i=0;i<res.data.length;i++){
                            for( let key in res.data[i]){
                                // console.log(key+"-----"+res.data[i][key]);
                                if(key === "username"){
                                    if(res.data[i][key] === this.username){
                                        console.log(key);
                                        Toast.fail("该账号已经注册");
                                        this.is_rename=true;
                                        return ;
                                    }
                                }

                            }
                        }

                        //注册用户
                        if(!this.is_rename){
                            let p = {
                                "username": this.username,
                                "password": this.password,
                                "name": this.name,
                                "styleMessage": this.styleMessage
                            };

                            register(p).then(res => {
                                console.log(res.data.state,"哈哈哈");
                                if (res.data.state === 200) {
                                    Toast.success("注册成功");
                                }else{
                                    Toast.fail("注册失败");
                                }
                            });
                        }

                    });
            },

            to_login(){
                this.$router.back();
            },

        },

        mounted() {
                Date.now()
        }
    }
</script>

<style scoped>
    .bigbox {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .mess {
        margin-left: 17px;
    }

    .title {
        margin-top: 56px;
        font-size: 21px;
    }

    .item {
        display: flex;
        flex-direction: row;
    }

    .input {
        outline: none;
        border: none;
        background-color: white;
        margin-left: 55px;
        border-left: 1px solid #eadfdf;
        font-size: 17px;
    }

    .login {
        width: calc(100% - 6px);
        margin: 0 auto;
        height: 47px;
        background-color: #1aad19;
        font-size: 19px;
        color: white;
        line-height: 47px;
        text-align: center;
        border-radius: 5px;
        margin-top: 56px;
    }

    .username {
        margin-top: 50px;
    }

    ._username {
        font-size: 19px;
        line-height: 19px;
    }

    .password {
        margin-top: 40px;
    }

    ._password {
        font-size: 19px;
    }

    .name {
        margin-top: 40px;
    }

    ._name {
        font-size: 19px;
    }

    .style_message {
        margin-top: 40px;
    }

    ._style_message {
        font-size: 19px;
    }

    ._style_message_input {
        margin-left: 18px;
    }

    .content {
        margin-top: 5px;
    }

    .register_and_forgetpass {
        margin-top: 44px;
        font-size: 15px;
        color: #0060a8;
    }
</style>